<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考勤统计</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" ;content="IE=edge, chrome=1">
    <link href="css/index.css" rel="stylesheet">
    <link href="css/shijian.css" rel="stylesheet">
</head>
<body>
<section class="container">
    <section class="container-left">
        <div class="container-left-header"><img src="images/logo.png" class="img-responsive"></div>
        <ul class="container-left-ul">
            <li><a href="index.html"><i class="icon1"></i>考勤数据</a></li>
            <li class="active"><a href="index2.html"><i class="icon2"></i>考勤统计</a></li>
        </ul>
    </section>
    <section class="container-right">
        <div class="container-right-header"><i><span></span></i>学生考勤</div>
        <div class="select-box">
            <span class="time-select"><input type="text"  id="input3" placeholder="选择日期"/></span>

            <span class="grade-select">
                <input type="text"  id="grade" placeholder="选择年级" readonly/>
                <ul class="grade-select-ul">
                    <li>一年级</li>
                    <li>二年级</li>
                    <li>三年级</li>
                    <li>四年级</li>
                    <li>五年级</li>
                    <li>六年级</li>
                    <div class="liner2"></div>
                    <li>初一</li>
                    <li>初二</li>
                    <li>初三</li>
                    <div class="liner2"></div>
                    <li>高一</li>
                    <li>高二</li>
                    <li>高三</li>
                </ul>
            </span>
            <span class="class-select">
                <input type="text"  id="classroom" placeholder="选择班级" readonly/>
                <ul class="class-select-ul">
                    <li>1班</li>
                    <li>2班</li>
                    <li>3班</li>
                    <li>4班</li>
                    <li>5班</li>
                    <li>6班</li>
                    <li>7班</li>
                    <li>8班</li>
                    <li>9班</li>
                    <li>10班</li>
                    <li>11班</li>
                    <li>12班</li>
                </ul>
            </span>


            <div class="liner"></div>
            <p class="attendance"><i></i>出勤情况表格</p>
            <div class="liner2"></div>
            <table class="text-center attendance-room">
                <thead>
                    <tr><th>课节</th><th>学科</th><th>出勤</th><th>迟到</th><th>缺勤</th><th>到勤率</th></tr>
                </thead>
                <tbody>
                <tr>
                    <td> 第一节</td>
                    <td>语文</td>
                    <td>50人</td>
                    <td>3人</td>
                    <td class="font-red">2人</td>
                    <td>94%</td>
                </tr>
                <tr>
                    <td> 第二节</td>
                    <td>语文</td>
                    <td>50人</td>
                    <td>3人</td>
                    <td class="font-red">2人</td>
                    <td>94%</td>
                </tr>
                <tr>
                    <td> 第三节</td>
                    <td>语文</td>
                    <td>50人</td>
                    <td>3人</td>
                    <td class="font-red">2人</td>
                    <td>94%</td>
                </tr>
                <tr>
                    <td> 第四节</td>
                    <td>语文</td>
                    <td>50人</td>
                    <td>3人</td>
                    <td class="font-red">2人</td>
                    <td>94%</td>
                </tr>

                <tr><td colspan="6"><div class="liner"></div></td></tr>
                <tr>
                    <td> 第五节</td>
                    <td>语文</td>
                    <td>50人</td>
                    <td>3人</td>
                    <td class="font-red">2人</td>
                    <td>94%</td>
                </tr>
                <tr>
                    <td> 第六节</td>
                    <td>语文</td>
                    <td>50人</td>
                    <td>3人</td>
                    <td class="font-red">2人</td>
                    <td>94%</td>
                </tr>
                <tr>
                    <td> 第七节</td>
                    <td>语文</td>
                    <td>50人</td>
                    <td>3人</td>
                    <td class="font-red">2人</td>
                    <td>94%</td>
                </tr>
                <tr>
                    <td> 第八节</td>
                    <td>语文</td>
                    <td>50人</td>
                    <td>3人</td>
                    <td class="font-red">2人</td>
                    <td>94%</td>
                </tr>

                </tbody>
            </table>

            <p class="attendance"><i></i>到勤率折线图</p>

            <div id="brokenLine" style="width:800px; height: 260px;"></div>

        </div>
    </section>
</section>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.common.min.js"></script>
<script src="js/jquer_shijian.js?ver=1" ></script>
<script>
    //左边菜单栏跳转

    //下拉选择显示和隐藏
    $("#input3").click(function(ev){
        $(".class-select-ul").slideUp();
        $(".grade-select-ul").slideUp();
        ev.stopPropagation();
    });
    $("#grade").click(function(ev){
        $(".grade-select-ul").slideToggle();
        $(".class-select-ul").slideUp();
        $(".df-box").slideUp();
        ev.stopPropagation();
    });
    $("#classroom").click(function(ev){
        $(".class-select-ul").slideToggle();
        $(".grade-select-ul").slideUp();
        $(".df-box").slideUp();
        ev.stopPropagation();
    });
    //下拉选择选中
    $(".grade-select-ul li").click(function(){
        $(".grade-select-ul li").attr('class','');
        $(this).attr('class','active');
        $("#grade").val($(this).text())
        $(".grade-select-ul").slideUp();
    });

    $(".class-select-ul li").click(function(){
        $(".class-select-ul li").attr('class','');
        $(this).attr('class','active');
        $("#classroom").val($(this).text())
        $(".class-select-ul").slideUp();
    });
    //时间选择插件
    $("#input3").shijian({
        y:-10,//当前年份+10
        Hour:false,//是否显示小时
        Minute:false,//是否显分钟
    })
    //折线图
    brokenLine("brokenLine",['第一节','第二节','第三节','第四节','第五节','第六节','第七节','第八节'],[98,99,100,96,97,99,100,99,100]);
    function brokenLine(obj,name,value){
        var myChart3 = echarts.init(document.getElementById(obj));
        option3 = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                width:800,
                left:50,
            },
            color:['#5ED3C8','#78D5FE'],
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: name,
                axisLine: {
                    show:false,
                },
                axisTick:false,
                splitLine: {
                    lineStyle: {
                        color: ['#CDE3F8']
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}%'
                },
                axisLine: {
                    show:false,
                },
                axisTick:false,
                splitLine: {
                    lineStyle: {
                        color: ['#CDE3F8']
                    }
                }
            },
            series: [
                {
                    name:'到勤率',
                    type:'line',
                    smooth:true,
                    data:value,
                }
            ]
        };

        myChart3.setOption(option3);

    }
</script>
</body>
</html>